<template>
  <div class="container">
    <el-row style="height: 5.2083rem" type="flex" justify="end" align="middle">
      <div class="logo">
        <img src="@/assets/images/homeImages/logo.png" alt=/>
      </div>
    </el-row>
    <div class="title">
      <p>高校档案管理系统</p>
    </div>
    <div class="carousel_box">
      <div class="btn leftBtn">
        <div class="icon" @click="marqueeBtn('left')"></div>
      </div>
      <div class="marquee">
        <div ref="wrap" class="wrap">
          <div
            ref="wrapItem"
            class="wrap_item"
            v-for="item in carouselList"
            :key="item.id"
            :style="item.staticStyle"
            @click="itemBtn(item)"
          >
            <div class="center">
              <div class="img">
                <div class="img-icon">
                  <img :src="item.imgUrl" alt="" />
                </div>
              </div>
              <div class="text">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn rightBtn">
        <div class="icon" @click="marqueeBtn('right')"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 跑马灯数据
      carouselList: [
        {
          id: 1,
          title: "综合档案管理系统",
          path: "综合档案管理系统",
          imgUrl: require("@/assets/images/homeImages/integrated_file_management.png"),
          staticStyle: {
            backgroundColor: "#87CEFA",
          },
        },
        {
          id: 2,
          title: "远程利用预约系统",
          path: "远程利用预约系统",
          imgUrl: require("@/assets/images/homeImages/remote_utilization_reservation.png"),
          staticStyle: {
            backgroundColor: "#394263",
          },
        },
        {
          id: 3,
          title: "声像档案管理系统",
          path: "声像档案管理系统",
          imgUrl: require("@/assets/images/homeImages/audio-visual_archives.png"),
          staticStyle: {
            backgroundColor: "#4169E1",
          },
        },
        {
          id: 4,
          title: "成绩翻译预约系统",
          path: "成绩翻译预约系统",
          imgUrl: require("@/assets/images/homeImages/score_translation_appointment.png"),
          staticStyle: {
            backgroundColor: "#000080",
          },
        },
        {
          id: 5,
          title: "学籍档案管理系统",
          path: "/academic_dissertation",
          imgUrl: require("@/assets/images/homeImages/school_roll_archives.png"),
          staticStyle: {
            backgroundColor: "#4B0082",
          },
        },
        {
          id: 6,
          title: "干部人事档案管理系统",
          path: "干部人事档案管理系统",
          imgUrl: require("@/assets/images/homeImages/cadre_personnel_file.png"),
          staticStyle: {
            backgroundColor: "#00808C",
          },
        },
        {
          id: 7,
          title: "学位论文管理系统",
          path: "/academic_dissertation",
          imgUrl: require("@/assets/images/homeImages/academic_dissertation.png"),
          staticStyle: {
            backgroundColor: "#FF4500",
          },
        },
        {
          id: 8,
          title: "档案移交接收管理系统",
          path: "档案移交接收管理系统",
          imgUrl: require("@/assets/images/homeImages/file_transfer_and_receipt.png"),
          staticStyle: {
            backgroundColor: "#ED7F10",
          },
        },
        {
          id: 9,
          title: "长期保存管理系统",
          path: "长期保存管理系统",
          imgUrl: require("@/assets/images/homeImages/long-stem_storage.png"),
          staticStyle: {
            backgroundColor: "#FF7F50",
          },
        },
        {
          id: 10,
          title: "档案信息门户网站",
          path: "档案信息门户网站",
          imgUrl: require("@/assets/images/homeImages/file_information_portal.png"),
          staticStyle: {
            backgroundColor: "#B8860B",
          },
        },
      ],
      marqueeWidth: 0,
      currentOffset: 0,
      deg: 0,
      lastX: 0,
      lastY: 0,
      nowX: 0,
      nowY: 0,
      minX: 0,
      minY: 0,
      roX: 0,
      roY: 0,
      timer: 0,
      items: [],
      ev: null,
      rootFontSize: "",
      rect: null,
      startClickTime: 0,
    };
  },
  computed: {},
  created() {},
  methods: {
    init() {
      document.oncontextmenu = function () {
        return false;
      };
      const oWrap = document.querySelector(".wrap");
      const oItems = document.querySelectorAll(".wrap_item");
      const marquee = document.querySelector(".marquee");
      this.deg = 360 / oItems.length;
      oItems.forEach((item, index) => {
        setTimeout(() => {
          item.style.transition = "1s " + (oItems.length - index) * 0.1 + "s";
          item.style.transform =
            "rotateY(" + index * this.deg + "deg) translateZ(23.4375rem)";
        }, (oItems.length - index) * 100);
      });
      let that = this;
      oWrap.onmousedown = (e) => {
        this.startClickTime = new Date().getTime();
        oWrap.style.transition = "";
        this.ev = e;
        marquee.onmousemove = function (event) {
          that.ev = event;
          this.onmousemove = function (e) {
            if (
              e.pageX < that.rect.left ||
              e.pageX > that.rect.right ||
              e.pageY < that.rect.top ||
              e.pageY > that.rect.bottom
            ) {
              marquee.onmousemove = null;
              marquee.onmouseup = null;
              oWrap.style.transform =
                "rotateX(-3deg) rotateY(" +
                this.roY +
                "deg) translateY(-2.6042rem)";
              return;
            }
            that.ev = event;
            that.lastX = that.ev.clientX;
            that.lastY = that.ev.clientY;
            that.nowX = e.clientX;
            that.nowY = e.clientY;
            that.minX = that.nowX - that.lastX;
            that.minY = that.nowY - that.lastY;
            that.roX -= that.minY * 0.01;
            that.roY += that.minX * 0.01;
            oWrap.style.transform =
              "rotateX(-3deg) rotateY(" +
              that.roY +
              "deg) translateY(-2.6042rem)";
            that.lastX = that.nowX;
            that.lastY = that.nowY;
          };
        };
      };
      oWrap.ontouchstart = (e) => {
        this.startClickTime = new Date().getTime();
        console.log("ontouchstart");
        oWrap.style.transition = "";
        this.ev = e.touches[0];
        marquee.ontouchmove = function (event) {
          console.log("ontouchmove");
          that.ev = event.touches[0];
          this.ontouchmove = function (e) {
            console.log("this.ontouchmove");
            that.ev = event.touches[0];
            that.lastX = that.ev.clientX;
            that.lastY = that.ev.clientY;
            that.nowX = e.touches[0].clientX;
            that.nowY = e.touches[0].clientY;
            that.minX = that.nowX - that.lastX;
            that.minY = that.nowY - that.lastY;
            that.roX -= that.minY * 0.01;
            that.roY += that.minX * 0.01;
            oWrap.style.transform =
              "rotateX(-3deg) rotateY(" +
              that.roY +
              "deg) translateY(-2.6042rem)";
            that.lastX = that.nowX;
            that.lastY = that.nowY;
          };
        };
      };
      marquee.addEventListener("mouseup", () => {
        marquee.onmousemove = null;
        marquee.onmouseup = null;
        oWrap.style.transform =
          "rotateX(-3deg) rotateY(" + this.roY + "deg) translateY(-2.6042rem)";
      });
      marquee.addEventListener("touchend", () => {
        console.log("touchend");
        marquee.ontouchmove = null;
        marquee.ontouchend = null;
        oWrap.style.transform =
          "rotateX(-3deg) rotateY(" + this.roY + "deg) translateY(-2.6042rem)";
      });
    },
    marqueeBtn(direction) {
      const oWrap = document.querySelector(".wrap");
      oWrap.style.transition = "0.3s";
      if (direction === "left") {
        this.roY -= 360 / this.carouselList.length;
        oWrap.style.transform =
          "rotateX(-3deg) rotateY(" + this.roY + "deg) translateY(-2.6042rem)";
      } else {
        this.roY += 360 / this.carouselList.length;
        oWrap.style.transform =
          "rotateX(-3deg) rotateY(" + this.roY + "deg) translateY(-2.6042rem)";
      }
    },
    itemBtn(item) {
      if (new Date().getTime() - this.startClickTime > 300) {
        console.log("長按了");
        return;
      }
      this.carouselIndex = item.id;
      setTimeout(() => {
        if (item.id === 7 || item.id === 5) {
          this.$router.push({
            path: item.path,
            query:{
              title:item.title
            }
          });
        }
        console.log("要前往的路径是", item.path);
      }, 200);
    },
    handleResize() {
      this.rootFontSize = window.innerWidth / 100; // 根据需要计算根字号
      document.documentElement.style.fontSize = this.rootFontSize + "px";
      let marquee = document.querySelector(".marquee");
      this.rect = marquee.getBoundingClientRect();
    },
  },
  mounted() {
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
    this.init();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/index_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  .logo {
    position: absolute;
    top: 1.5625rem;
    right: 1.0417rem;
  }

  .logo img {
    object-fit: cover;
    max-width: 100%;
    width: 10vw;
    height: auto;
  }
  .title {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    p {
      font-size: 2.9167rem;
      font-weight: 700;
      color: #f5f5f5;
    }
  }
  .carousel_box {
    width: 100%;
    height: 18.2292rem;
    display: flex;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    .btn {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        width: 10.4167rem;
        height: 10.4167rem;
        background-size: contain;
        cursor: pointer;
        opacity: 0.1;
        transition: 0.3s;
        &:hover {
          opacity: 1;
        }
      }
      &.leftBtn {
        .icon {
          background-image: url("@/assets/images/homeImages/btn_left.png");
        }
      }
      &.rightBtn {
        .icon {
          background-image: url("@/assets/images/homeImages/btn_right.png");
        }
      }
    }
    .marquee {
      flex: 2;
      perspective: 125rem;
      display: flex;
      justify-content: center;
      align-items: center;

      .wrap {
        position: relative;
        height: 13.0208rem;
        width: 10.4167rem;
        margin: auto;
        transform-style: preserve-3d;
        transform: rotateX(-3deg) translateY(-2.6042rem);

        .wrap_item {
          width: 10.9896rem;
          height: 14.2188rem;
          position: absolute;
          border-radius: 0.5208rem;
          box-shadow: 0 0 0.5208rem #000;
          -webkit-box-reflect: below 0.2604rem -webkit-linear-gradient(top, rgba(
                  0,
                  0,
                  0,
                  0
                )
                40%, rgba(0, 0, 0, 0.5) 100%);
          transform: rotateY(0deg) translateZ(5.2083rem);
          cursor: pointer;
          &:hover {
            box-shadow: 0rem 0rem 0.2604rem #dbd7d7;
          }
          .center {
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: space-evenly;
            flex-direction: column;
            text-decoration: none;
            color: #fff;
            font-size: 0.9375rem;
            text-align: center;
            line-height: 2.0833rem;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            .img {
              display: flex;
              justify-content: center;

              .img-icon {
                padding: 1.0417rem;
                border-radius: 50%;
                box-shadow: 0rem 0rem 1.5625rem;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                  width: 3.6458rem;
                  height: 3.6458rem;
                  -webkit-user-drag: none;
                  -moz-user-drag: none;
                  -ms-user-drag: none;
                  user-drag: none;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
